@extends('master')
@section('style')
<style>
	#content{margin-top: 50px; }
	.search-content{padding:30px 0px; font-size: 14px; }
	.inbox-title{border-bottom: 1px solid #ddd;padding-bottom: 10px;}
	.msg-info-null{border: 2px dashed #ddd; line-height: 30px; border-radius: 10px;margin-top: 10px;opacity: 0.8;}
	/*.inbox-list{min-height: 400px;}*/
	.inbox-alert{margin-top: 30px;}
</style>
@endsection
@section('content')
<div id="content" class="container">
		<div class="search-content col-md-8">
			<div class="inbox-title col-md-12">
				<div class="col-md-6">
					<h4>{{$question->title}}</h4>
				</div>
			</div>
			<div class="inbox-list col-md-12">
				<div class="msg-info-null col-md-12 ">{!!$question->content!!}</div>
			</div>
		</div>
		<div class="col-md-8">
			<form id="question_form">
                <div class="col-md-1"><img width="36" src="{{session('face')}}" alt="" style="border-radius: 50%;"></div>
                <div class="col-md-11">
                    <div class="input-group input-group-lg col-md-12">
                        <input type="hidden" name="question_id" value="{{$question->id}}">
                        <input type="text" name="content" class="form-control" placeholder="我要回复" aria-describedby="sizing-addon1" style="border-radius: 5px;">
                    </div>
                </div>
                <div class="col-md-12 text-right" style="margin-top: 10px;">
                    <span class="btn">取消</span>
                    <span id="question_btn" class="btn btn-primary" onclick="$('#question_form').submit();">评论</span>
                </div>
            </form>
		</div>
		<script>
            $('#question_form').submit(function() {
                var data = {
                    content : $('#question_form input[name=content]').val(),
                    article_id : $('#question_form input[name=question_id]').val(),
                    class: '2'
                };
                $.post('/api/discuss', data, function(res){
                    if(!res.id) return false;
                    var discuss = $('<div></div>');
                    var discuss_datail = '<div class="col-md-12">';
                    discuss_datail += '<div class="col-md-1"><img width="40" src="'+res.face+'" alt="" style="border-radius: 50%;"></div>';
                    discuss_datail += '<div class="col-md-11"><h4><b>'+res.name+'</b></h4>';
                    discuss_datail += '<p>'+res.content+'</p><h5><span>'+res.created_at+'</span>';
                    discuss_datail += '<span><span class="glyphicon glyphicon-log-in"></span> <a href="#">回复</a></span> <span><span class="glyphicon glyphicon-thumbs-up"></span> <a href="#">赞</a></span> <span><span class="glyphicon glyphicon-earphone"></span> <a href="#">举报</a></span>'
                    discuss_datail += '</h5></div></div>';
                    discuss.html(discuss_datail);
                    discuss.slideDown();
                    $('#discuss_list').prepend(discuss);
                }, 'json');
                return false;
            });
        </script>
        <!-- 评论列表 -->
		<div id="discuss_list" class="col-md-8">
			@foreach($question->discusses as $k=>$v)
                <div class="col-md-12">
                    <div class="col-md-1"><img width="40" src="{{$v->user->face}}" alt="" style="border-radius: 50%;"></div>
                    <div class="col-md-11">
                        <h4><b>{{$v->user->name}}</b></h4>
                        <p>{{$v->content}}</p>
                        <h5>
                            <span>{{$v->created_at}}</span>
                            <span><span class="glyphicon glyphicon-log-in"></span> <a href="#">回复</a></span>
                            <span><span class="glyphicon glyphicon-thumbs-up"></span> <a href="#">赞</a></span>
                            <span><span class="glyphicon glyphicon-earphone"></span> <a href="#">举报</a></span>
                        </h5>
                    </div>
                </div>
            @endforeach
            <div class="col-md-12 text-right">
			{!! $question->discusses->render() !!}
			</div>
		</div>
	</div>
@endsection